<section id="o2oc-pay-panel">
    <div class="container">
        <h2 style="margin-top:40px;margin-bottom:40px;">Pay</h2>
        <div class="row">
            <div class="col-md-8 col-xs-12">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">{{ currentMerchant.name }}</h3>
                    </div>
                    <div class="panel-body">
                        
                        <div ng-repeat="item in cart">
                            <div class="float-left">
                                <img ng-src="{{globalData.contextPath}}/api/resources/{{item.img}}">
                            </div>
                            <div class="float-right">
                                <h3>{{ item.dishName }}<span>X{{ item.num }}</span></h3>
                                <h5>Single: {{ item.unitPrice }}</h5>
                                <h4>Total: {{ item.unitPrice * item.num }}</h4>
                            </div>

                            <div class="clear"></div>

                            <hr ng-if="!$last">
                        </div>
                            
                        

                    </div>

                </div><!-- template end -->
            </div>
            <div class="col-md-4 col-xs-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">Customer Info</h3>
                    </div>
                    <div class="panel-body">
                        <form id="customer-info-form">
                            <!-- <input id="cid-input" type="hidden" value="${loginCustomer.id}">
                            <input id="cname-input" type="hidden" value="${loginCustomer.cname}"> -->
                            
                            <!-- <input id="mid-input" type="hidden" name="mid" value="${merchant.id}">
                            <input type="hidden" name="totalPrice" value="${totalPrice}"> -->
                            
                            <p><input type="text" class="form-control" name="realName" placeholder="Enter your name..." ng-model="newOrder.realName"></p>
                            <p><input type="number" class="form-control" name="phone" placeholder="Enter your phone..." ng-model="newOrder.phone"></p>
                            <p style="margin-top: 20px;">Choose address:</p>
                            <div>
                                <div style="position: relative; margin-bottom: 10px;">
                                    <div style="position: absolute; left: 0; right: 45px;">
                                        <input type="text" class="form-control" placeholder="Enter new address..." ng-model="newAddr.address">
                                    </div>
                                    <div style="float: right; width: 40px;">
                                        <a role="button" class="btn btn-success" ng-click="addAddress()"><span class="glyphicon glyphicon-plus"></span></a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                
                                <ul id="address-list" class="list-group">

                                    <li class="list-group-item" style="position: relative;" ng-repeat="addr in addrs">
                                        <div class="float-left" style="padding-right: 45px;">
                                            <label><input type="radio" name="addr" value="{{ addr.name }}" ng-model="newOrder.address">&nbsp;{{ addr.name }}</label>
                                        </div>
                                        <div class="float-right" style="position: absolute; right: 15px;">
                                            <button role="button" class="btn btn-danger" ng-click="deleteAddress(addr._id)"><span class="glyphicon glyphicon-trash"></span></button>
                                        </div>
                                        <div class="clear"></div>
                                        
                                    </li>

                                </ul>
                            </div>
                            
                            <hr style="margin-bottom: 0;">
                            <div class="float-left">
                                <h3>Total:</h3>
                            </div>
                            <div class="float-right">
                                <h3>{{ getTotalPrice() }}</h3>
                            </div>

                            <div class="clear"></div>

                            <a role="button" class="btn btn-success" ng-click="payOrder()">Confirm order</a>
                        </form>

                    </div>
                </div>
            </div>
        </div> 
        
    </div>
    
    <div id="pay-success-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Success!</h4>
                </div>
                <div class="modal-body">
                    You order has been paid.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    
</section>